<template>
  <div id="user">
    <nav-bar title="个人信息"></nav-bar>
    <div id="info">
      <van-form @submit="onSubmit" id="infoForm">
        <div>
          <van-cell title="头像">
            <template #right-icon>
              <van-uploader accept="image/*" :after-read="changeHead" :max-count="1">
                <img style="width: 3.5rem;height: 3.5rem" :src="userHeadSrc" alt="">
              </van-uploader>
            </template>
          </van-cell>
        </div>
        <van-field
            v-model="userName"
            name="userName"
            label="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            :formatter="formatter"
        />
        <van-field name="sex" label="性别" :rules="[{required: true,message:'请选择性别'}]">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="M">男</van-radio>
              <van-radio name="W">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-model="email"
            name="email"
            disabled
            label="邮箱"
        />
        <van-field
            disabled
            v-model="schoolName"
            name="schoolName"
            label="学校"
        />
        <div>
          <van-button style="position: fixed;bottom: 0;width: 100%" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import NavBar from "components/NavBar/NavBar";
import {Toast} from "vant";
import _g from "assets/js/global";

export default {
  name: "User",
  components: {
    NavBar
  },
  data() {
    return {
      userName: '',
      email: '',
      sex: '',
      schoolName: '华南农业大学',
      userHeadSrc: '',
      userHead: null,
      info: null
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.info = JSON.parse(localStorage.getItem("loginInfo"));
      this.email = this.info.email;
      this.sex = this.info.sex;
      this.userName = this.info.userName;
      this.userHeadSrc = this.info.userHead;
      this.id = this.info.id;
    },
    formatter(v) {
      return v.trim();
    },
    onSubmit(e) {
      e['id'] = this.info.id;
      if (this.userHead !== null) {
        e['userHeadPicture'] = this.userHead;
      }
      let formData = _g.toFormData(e);
      new Promise(((resolve, reject) => {
        return axios.post('/yibancircle/user', formData, {
          headers: {'content-type': 'application/x-www-form-urlencoded'}
        })
            .then(res => {
              console.log(res);
              if (res.status === 200) {
                resolve(res);
              } else {
                reject(res);
              }
            })
            .catch(err => {
              reject(err);
            })
      })).then(res => {
        localStorage.setItem('loginInfo', JSON.stringify(res.result));
        Toast.success('修改成功');
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }).catch(err => {
        Toast.fail('请重新提交');
      })
    },
    changeHead(e) {
      this.userHead = e.file;
      this.userHeadSrc = e.content;
    }
  }
}
</script>

<style scoped>

</style>
